<template>
	<el-form ref="form" :model="form" :label-width="labelWidth" size="small" @submit.native.prevent :label-position="labelPosition" :rules="rules">
		<el-form-item v-for="item in formList" :key="item.name" :label="item.label" :prop="item.name">
			<template v-if="item.type === 'input'">
				<el-input :maxlength="item.maxlength" v-model="form[item.name]" @blur="inputBlur(item)"></el-input>
			</template>
			<template v-else-if="item.type === 'textarea'">
				<el-input v-model="form[item.name]" :maxlength="item.maxlength" type="textarea"></el-input>
			</template>
			<template v-else-if="item.type === 'switch'">
				<el-switch v-model="form[item.name]" :active-value="1" :inactive-value="0"></el-switch>
				<div class="danger" v-if="form[item.name]">{{item.tip}}</div>
			</template>
			<template v-else-if="item.type === 'select'">
				<el-select v-model="form[item.name]" style="width:100%" @change="selectChange(item.name)" :filterable="true" :disabled='item.disabled' :multiple="item.multiple">
          <el-option v-for="(one, index) in item.data" :key="index" :label="one.label" :value="one.value">
          </el-option>
        </el-select>
			</template>
			<el-checkbox-group v-model="form[item.name]" @change="$emit('changeCheckbox')" v-else-if="item.type === 'checkbox'">
				<el-checkbox v-for="(one, index) in item.data" :key="index" :label="one.value" :disabled="one.disabled">
					{{one.label}}
				</el-checkbox>
			</el-checkbox-group>
			<el-radio-group v-model="form[item.name]" @change="selectChange(item.name)" v-else-if="item.type === 'radio'">
				<el-radio :label="one.value" :class="item.class" v-for="(one, index) in item.data" :key="index">{{one.label}}</el-radio>
			</el-radio-group>
			<template v-else-if="item.type === 'slot'">
				<slot :name="item.name + 'Slot'"></slot>
			</template>
		</el-form-item>
		<el-form-item label="">
			<slot name="button"></slot>
		</el-form-item>
	</el-form>
</template>
<script lang="ts">
import { Component, Prop, Vue, Ref, Emit, Watch } from 'vue-property-decorator';
// eslint-disable-next-line no-restricted-imports
import { trim } from 'lodash';
@Component({
  name: 'commonForm',
  components: {
  }
})
export default class extends Vue {
  [x: string]: any;
  @Prop(Object) public form!: any;
  @Prop(Object) public rules!: any;
  @Prop(Array) public fieldsList!: any;
  @Prop(Array) public formList!: any[];
  @Prop(Array) public list!: any[];
  @Prop({ default: '80px' }) public labelWidth!: string;
  @Prop({ default: 'top' }) public labelPosition!: string;

  @Emit('blur')
  private inputBlur (item) {
    this.form[item.name] = trim(this.form[item.name]);
    return item;
  }

  private selectChange (name, refs?) {
    if (name === 'selectType') {
      if (this.form.fieldType === 'member') {
        this.form.defaultValue = { fixedValue: '', dynamicValue: '' };
      }
    } else if (name === 'dataType') {
      this.form.optionalScope = {
        dept: [],
        service: [],
        technology: []
      }
    }
  }

  // 获取label 监听改变
  @Watch('form', { immediate: true, deep: true })
  private onChanged (val, oldVal) {
    if (this.$refs.cascaderVal) {
      this.$emit('onChanged', this.$refs.cascaderVal);
    }
  }
}
</script>
<style scoped lang='stylus'>
.danger {
  color: #f56c6c;
	width: 100%;
	line-height: 16px;
	font-size: 12px;
	margin-top: 8px;
}
.title-show {
	position absolute
	top -32px
	right 0
	font-size 14px
	line-height 20px
	text-align center
	letter-spacing 0.2px
	text-transform uppercase
	color #000000
	opacity 0.8
	.show-name {
		font-size 14px
		margin-right 5px
	}
}
.preview {
	width 100%
	font-size 14px
	padding 12px 16px
	height 100%
	span {
		display block
		line-height 20px
	}
	.preview-title {
		color $word4
	}
	.preview-content {
		padding-top 6px
		color $word3
	}
}
.edtior {
	line-height 32px
}
</style>
